<template>
  <body>
    <ParentHeader :selected-column-id="articleDetail?.parentColumnId"></ParentHeader>
    <div v-if="articleDetail">
      <div v-if="articleDetail.title" class="content-title">{{ articleDetail.title }}</div>
      <div v-if="articleDetail.createdTime" class="content-info">时间：{{ articleDetail.createdTime }}</div>
      <div v-if="articleDetail.title" class="content-title-line"></div>

      <!-- <img v-if="articleDetail.coverImageUrl" :src="articleDetail.coverImageUrl" alt="" class="content-img"/> -->
      <div v-if="articleDetail.videoUrl" class="activity-video-container">
              <video controls >
                <source :src="articleDetail.videoUrl" type="video/mp4">
                您的浏览器不支持 video 显示
              </video>
      </div>
     
      <div v-if="articleDetail.content" v-html="articleDetail.content" class="content-text"></div>
    </div>
    <Footer></Footer>
  </body>
</template>

<script>
import { defineComponent, onMounted, computed, ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useColumnsStore } from '@/store/column';
import Footer from '../components/footer.vue';
import ParentHeader from '../components/parentHeader.vue';
import { getArticleService, getColumnDetailService } from '@/api/user.js';

export default defineComponent({
  name: 'ArticleDetail',
  components: {
    Footer,
    ParentHeader,
  },
  setup() {
    const route = useRoute();
    const articleDetail = ref(null);
    const columnsStore = useColumnsStore();
    const columnDetail = ref(null);

    // 获取文章详情和栏目信息
    const fetchArticleDetail = async () => {
      try {
        const articleId = route.params.id;
        const response = await getArticleService(articleId);
        articleDetail.value = response.data;
        
        // 获取文章所属栏目的详情
        if (articleDetail.value?.subColumnId) {
          const columnResponse = await getColumnDetailService(articleDetail.value.subColumnId);
          columnDetail.value = columnResponse.data;
        }
      } catch (error) {
        console.error("Failed to fetch article detail:", error);
      }
    };

    // 确保在组件挂载时获取父级栏目数据
    onMounted(async () => {
      if (columnsStore.parentColumns.length === 0) {
        await columnsStore.fetchParentColumns();
      }
      await fetchArticleDetail();
    });

    return {
      articleDetail,
      columnDetail
    };
  }
});
</script>

<style>
.content {
  position: relative;
  width: 75rem;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 3.125rem;
}

.content-title {
  width: 100%;
  font-weight: bold;
  font-size: 1.95rem;
  color: #2D2D2D;
  line-height: 1.875rem;
  text-align: center;
  margin-bottom: 1.5625rem;
}

.content-info {
  width: 100%;
  font-weight: 400;
  font-size: 0.875rem;
  color: #979797;
  line-height: 1.875rem;
  text-align: center;
  margin-bottom: 1.5625rem;
}

.content-title-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 0.0625rem;
  background: #D5D5D5;
  width: 80rem;
  margin-top: 1rem;
}

.content>.news-item-p {
  width: 100%;
  font-weight: 400;
  font-size: 1rem;
  color: #2D2D2D;
  line-height: 1.875rem;
  margin-bottom: 3.1875rem;
  text-indent: 2em;
}

.content>.news-item-img {
  width: 62.25rem;
  height: 36.5rem;
  margin-bottom: 2.4375rem;
}

.content>.news-item-video {
  width: 62.27rem;
  height: 36.53rem;
  margin: 1.69rem auto;
}
.content-img {
    width: 60%;
    height: 400px;
    margin-left: 350px;
    margin-top: 10px;
}
/* 视频容器 */
.activity-video-container {
    width: 100%; /* 自适应父级元素宽度 */
    height: 500px;
    margin-bottom: 10px;
    overflow: hidden;
    margin-left: 520px;
    margin-top: 30px;
}

/* 新增富文本内容区域的样式 */
.content-text {
  width: 60%; /* 控制内容区域宽度 */
  margin: 30px auto; /* 上下间距30px，左右自动居中 */
  padding: 20px 40px; /* 内部填充 */
  line-height: 1.8; /* 行高 */
  color: #333; /* 文字颜色 */
  font-size: 16px; /* 文字大小 */
}

/* 富文本内容中的段落样式 */
.content-text p {
  text-align: justify; /* 两端对齐，更适合阅读 */
  font-size: 1.2rem;
  margin-bottom: 1.2em; /* 段落间距 */
  text-indent: 2em; /* 段落首行缩进 */
}

/* 富文本中的图片样式 */
.content-text img {
  max-width: 100%; /* 图片最大宽度不超过容器 */
  height: auto; /* 高度自适应 */
  display: block; /* 块级显示 */
  margin: 20px auto; /* 图片上下间距和居中 */
}

/* 富文本中的标题样式 */
.content-text h1,
.content-text h2,
.content-text h3,
.content-text h4,
.content-text h5,
.content-text h6 {
  margin: 1.5em 0 0.8em; /* 标题的上下间距 */
  font-weight: bold;
  line-height: 1.4;
}

/* 富文本中的列表样式 */
.content-text ul,
.content-text ol {
  margin: 1em 0;
  padding-left: 2em;
}

.content-text li {
  margin-bottom: 0.5em;
  line-height: 1.6;
}

/* 富文本中的引用样式 */
.content-text blockquote {
  margin: 1em 0;
  padding: 15px 20px;
  background-color: #f8f8f8;
  border-left: 4px solid #ddd;
  color: #666;
}

/* 富文本中的链接样式 */
.content-text a {
  color: #0066cc;
  text-decoration: none;
}

.content-text a:hover {
  text-decoration: underline;
}

/* 适配移动端 */
@media screen and (max-width: 768px) {
  .content-text {
    width: 90%;
    padding: 15px 20px;
  }
}

/* 富文本中的表格样式 */
.content-text table {
  width: 100%;
  margin: 1em 0;
  border-collapse: collapse;
  border-spacing: 0;
}

.content-text table th,
.content-text table td {
  padding: 8px;
  border: 1px solid #ddd;
}

.content-text table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

.content-text table tr:nth-child(even) {
  background-color: #fafafa;
}
</style>